<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
   	<style>
   		h3{
   			text-align: center ;
   		}
   		
   		#t1,#t2{
   			width:600px;
   			font-size: 10px; 
   			margin:0 auto ;
   		}
   		
   		#t2 {
   			border:2px solid gray ;
   			border-collapse: collapse;
   			
   			text-align: center ;
   		}
   		
   		#t2 td,#t2 th{
   			border:2px solid gray ;
   		}
   		
   		#lbl{
   			margin-left: 100px;
   		}
		img{
			border-radius: 100px;

		}
   </style>
	<script type="text/javascript" src="http://localhost:8080/jquery-1.11.0.js"></script>
	<script>
        function selectall() {//全选
            var a = empform.checkList.length;
            if (a != undefined){
                for (i = 0; i < a; i++)
                    empform.checkList[i].checked = true;
            }
        }

        function unselectall() {//取消全选
            var a = empform.checkList.length;
            if (a != undefined){
                for (i = 0; i < a; i++)
                    empform.checkList[i].checked = false;
            }
        }
        $(function(){
            var ids;
            $("#delete").click(function(){
                $("input[type=checkbox]:checked").each(function(){
                    if(ids){
                        ids+="," +$(this).attr('value');

                    }else{
                        ids=$(this).attr('value');

                    }
                });
				alert(ids)
                window.location = "/employee/deletes/"+ids;
            });

		});





	</script>
</head>
	
<body>

<!--天气模块-->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "circle",
    "uid": "U9AE56E49E",
    "hash": "747d4422e9a7c39cda81a7b5c29df200"
});
tpwidget("show");</script>
     <h3>雇员信息</h3>
     <label id = "lbl">登录用户：<label th:text = "${session.loginUser.name}"></label></label>
	<span th:if="${!#strings.isEmpty(session.qq_pic)}">

	  <img th:src="${session.qq_pic}">
	</span>
	<a th:href="@{/user/logout}">退出</a>
   <hr >
	 <form name="empform" method="post" id="empform" >

	 <table  id = "t1">
    	<tr>
    		<td>
    			  <a th:href = "@{/employee/toAdd}">添加</a>&nbsp;&nbsp;

				<input type="button" id="delete" value="删除">

				<input type="button" value="全选" onclick="selectall()" /><input type="button" value="取消" onclick="unselectall()" />
    		</td>
    	</tr>
    </table>
    <table id = "t2">
    	 <tr>
    	 	  <th><input type = "checkbox" id = "idall" ></th>
    	 	  <th>编号</th>
    	 	  <th>姓名</th>
    	 	  <th>电话</th>
    	 	  <th>生日</th>
    	 	  <th>地址</th>
    	 	  <th>部门</th>
    	 	  <th>操作</th>
    	 </tr>

		 <tr th:each = "e,iterStat: ${employees}">
			 <td><input type="checkbox"  name="checkList" th:value="${e.id}"></td>
    	 	    <td th:text = "${iterStat.count}"></td>
    	 	    <td th:text = "${e.empName}"></td>
    	 	    <td th:text = "${e.phone}"></td>
			 <!--对于时间转换:#dates.format()-->
    	 	    <td th:text = "${#dates.format(e.birthday,'yyyy年MM月dd日')}"></td>
    	 	    <td th:text = "${e.address}"></td>
    	 	    <td th:text = "${e.dept.deptName}"></td>
    	 	    <td >
    	 	    	 <a th:href = "@{/employee/delete/} + ${e.id}">删除</a>&nbsp;&nbsp;
    	 	    	 <a th:href = "@{/employee/toUpdate/} + ${e.id}">修改</a>
    	 	    </td>
		 </tr>    	 
    </table>
	 </form>
<script>
    var meting_api='http://api.mizore.cn/meting/api.php?server=netease&type=playlist&id=733028237';
</script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="733028237" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>


<center>
	音乐播放

</center>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
		server="netease"
		type="playlist"
		id="733028237">
</meting-js>

</body>
</html>